<template>
  <div class="inner_value">
    <transition-group
      tag="ul"
      :class="[
        'el-upload-list',
        'el-upload-list--' + listType,
        { 'is-disabled': disabled },
      ]"
      name="el-list"
    >
      <li
        v-for="(file, index) in files"
        :key="index"
        :class="[
          'el-upload-list__item',
          'is-' + file.status,
          focusing ? 'focusing' : '',
        ]"
        tabindex="0"
        @keydown.delete="!disabled && $emit('remove', file)"
        @focus="focusing = true"
        @blur="focusing = false"
        @click="focusing = false"
      >
        <slot name="file" :file="file">
          <img
            v-if="
              file.status !== 'uploading' &&
              ['picture-card', 'picture'].indexOf(listType) > -1
            "
            fit="contain"
            class="el-upload-list__item-thumbnail"
            :src="file.url"
            alt=""
          />
          <div
            v-if="['picture-card', 'picture'].indexOf(listType) > -1"
            class="el-upload-list__item-card-name"
          >
            {{ file.name }}
          </div>
          <a class="el-upload-list__item-name" @click="handleClick(file)">
            <i class="el-icon-document" />{{ file.name }}
          </a>
          <label class="el-upload-list__item-status-label">
            <i
              :class="{
                'el-icon-upload-success': true,
                'el-icon-circle-check': listType === 'text',
                'el-icon-check':
                  ['picture-card', 'picture'].indexOf(listType) > -1,
              }"
            />
          </label>
          <i
            v-if="!disabled"
            class="el-icon-close"
            @click="$emit('remove', file)"
          />
          <i v-if="!disabled" class="el-icon-close-tip">
            {{ t("el.upload.deleteTip") }}
          </i>
          <!--因为close按钮只在li:focus的时候 display, li blur后就不存在了，所以键盘导航时永远无法 focus到 close按钮上-->
          <span
            v-if="listType === 'picture-card'"
            class="el-upload-list__item-actions"
          >
            <span
              v-if="handlePreview && listType === 'picture-card'"
              class="el-upload-list__item-preview"
              @click="handlePreview(file)"
            >
              <i class="el-icon-zoom-in" />
            </span>
            <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="$emit('remove', file)"
            >
              <i class="el-icon-delete" />
            </span>
          </span>
        </slot>
      </li>
    </transition-group>
  </div>
</template>
<script>
import Locale from "element-ui/src/mixins/locale";

export default {
  name: "ElUploadList",

  mixins: [Locale],
  props: {
    files: {
      type: Array,
      default() {
        return [];
      },
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    handlePreview: Function,
    listType: String,
  },

  data() {
    return {
      focusing: false,
    };
  },

  methods: {
    parsePercentage(val) {
      return parseInt(val, 10);
    },
    handleClick(file) {
      this.handlePreview && this.handlePreview(file);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-upload-list__item-card-name {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    width: 146px;
    line-height: 2.4;
    font-size: 12px;
    padding-right: 20px;
    padding-left: 4px;
    text-overflow: ellipsis;
    color: #ffffff;
    background-color: #00000088;
  }
}
</style>
